import React from 'react';
import { Table, Row, Col, Form, Button, Popconfirm, Tabs, message } from 'antd';
const R = require('ramda');
import PayerDetail from './PayerDetail';
import RightBox from "../../commons/RightBox";
import RightConstants from "../../../utils/RightConstants";
import Constants from "../../../utils/Constants";
import {connect} from 'dva/index';
const FormItem = Form.Item;

const payer = Form.create({ wrappedComponentRef: true })(class Payer extends React.Component {
    constructor(props) {
        super(props);
    }

    handleResetFields = () => {
        this.props.form.resetFields();
    }

    handleOpenAdd = () => {
        this.payerDetail.handleOpen();
    }


    onEdit = (record, type) => {
        this.props.dispatch({ type: 'outbuyPayer/getById', payload: { id: record.id } });
        this.payerDetail.handleOpen();
    };

    columns = [
        { title: '收款人名称', dataIndex: 'name', key: 'name' },
        { title: '收款人账号', dataIndex: 'account', key: 'account' },
        { title: '创建人', dataIndex: 'creatorName', key: 'creatorName' },
        { title: '创建时间', dataIndex: 'createTime', key: 'createTime' },
        {
            title: '操作', key: 'key_oprator',
            render: (text, record, index) => {
                return (
                    <span>

                        {this.props.disabled == true ?
                            <span>
                                <a href="#" onClick={this.onEdit.bind(this, record, "view")}>查看</a>
                            </span>
                            :
                            <RightBox resource={RightConstants.OUTBUY.OUTBUY_PAYER_DELETE}><span>
                                <Popconfirm placement="leftTop" title={'数据删除后将不可以恢复，是否继续删除？'}
                                    onConfirm={() => {
                                        this.props.dispatch({
                                            type: 'outbuyPayer/deleteById',
                                            payload: {
                                                id: record.id,
                                                onSuccess: () => {
                                                    this.props.dispatch({ type: 'outbuyPayer/getOutbuyPayerList', payload: { providerId: this.props.providerId, page: Constants.DEFAULT_PAGE } });
                                                }
                                            }
                                        })
                                    }} okText="是" cancelText="否">
                                    <a href="#" disabled={this.props.disabled}>删除</a>
                                </Popconfirm>
                            </span></RightBox>
                        }
                    </span>
                );
            }
        }];

    render() {
        let dataSource = R.isNil(this.props.dataSource) ? {} : this.props.dataSource;
        let pagination = {
            showTotal: total => `共 ${total} 条数据`,
            pageSize: this.props.outbuyPayer.page.size,
            total: this.props.outbuyPayer.page.totalRow,
            showSizeChanger: true,
            current: this.props.outbuyPayer.page.page,
            onShowSizeChange: (current, size) => {
                let newPage = this.props.outbuyPayer.page;
                newPage.size = size;
                newPage.page = 1;
                this.props.dispatch({
                    type: 'outbuyPayer/query',
                    payload: {
                        page: newPage,
                        providerId: this.props.providerId
                    }
                });
            },
            onChange: (pageNumber, pageSize) => {
                let newPage = this.props.outbuyPayer.page;
                newPage.page = pageNumber;
                this.props.dispatch({
                    type: 'outbuyPayer/query',
                    payload: {
                        page: newPage,
                        providerId: this.props.providerId
                    }
                });
            }
        }

        return (
            <div>
                <Form>
                    <Row>
                        <Col span={12}>
                            <FormItem>
                                <RightBox resource={RightConstants.OUTBUY.OUTBUY_PAYER_ADD}>
                                    <Button type="primary" icon="plus" size={'default'} disabled={this.props.disabled} onClick={this.handleOpenAdd.bind(this)}
                                            style={{ display: dataSource.chargestatus !== "2" ? 'inline-block' : 'none' }}
                                    >增加收款账户</Button>
                                </RightBox>
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
                <Table dataSource={this.props.outbuyPayer.list} columns={this.columns} bordered={true} size={'middle'} pagination={pagination} scroll={{ x: true }} />

                <PayerDetail wrappedComponentRef={(inst) => this.payerDetail = inst} dispatch={this.props.dispatch} providerId={this.props.providerId} />

            </div>
        )
    }
})

function mapStateToProps(state) {
    return {
        loading: state.loading.models.outbuyPayer, outbuyPayer: state.outbuyPayer
    };
}

export default connect(mapStateToProps)(payer);